<template>
    <indexChartVue @Select="Select" />
    <a-modal v-model:visible="CardStatus" :footer="null" destroyOnClose :maskClosable="false" :title="CardData.title"
        width="1200px">
        <CardsVue :Options="CardData" @look-topic-code="lookTopicCode" @look-user-code="lookUserCode" />
    </a-modal>
    <inspectVue v-if="LookAtStatus" v-model:show="LookAtStatus" :Status="LookAtData" />
</template>
<script lang="ts" setup>
import { nextTick, ref } from 'vue';
import indexChartVue from './IndexChart.vue';
import CardsVue from './Cards.vue';
import inspectVue from './inspect.vue';
import apis from '@/apis/statistics'


const CardStatus = ref<boolean>(false);
const CardData = ref<any>({
    title: 'asdasd',
    description: 'asdasd',
    id: 'asdasd',
    users: [],
});

const Select = (item: any) => {
    CardData.value = {
        title: item.title,
        description: item.description,
        id: item.id,
        users: [],
    };
    for (let i = 0; i < item.users.length; i++) {
        const element = item.users[i];
        var data = {
            id: element.id,
            nickname: element.nickname,
            ChartData: [element.A || 0, element.B || 0, element.C || 0, element.D || 0, element.E || 0],
            totalPoints: element.total,
        };
        CardData.value.users.push(data);
    };
    nextTick(() => {
        CardStatus.value = true;
    });
}

const LookAtStatus = ref<boolean>(false);
const LookAtData = ref<{
    Code: string,
    imagePath: string,
    title: string,
    nickname: string
}>({
    Code: '',
    imagePath: '',
    title: '',
    nickname: ''
});

const lookTopicCode = (id: string) => {
    apis.topic({ id: id }).then((res: any) => {
        LookAtData.value = {
            ...res[0],
            nickname: ''
        };
        nextTick(() => {
            LookAtStatus.value = true
        })
    });
}

const lookUserCode = (id: string) => {
    apis.inspect({ id: id }).then((res: any) => {
        LookAtData.value = {
            ...res[0],
        };
        nextTick(() => {
            LookAtStatus.value = true
        })
    });
}

</script>